Introduction

You previously recapped the key principles of navigation that make it easier for a user to navigate an app or website. This includes how to set up an intuitive and logical structure. In this exercise, you’ll practice applying these principles as you add more screens to the previously created onboarding page and set up navigation between them.

Scenario

Consider for a moment what information a user would want out of an app for ordering food. You might agree that users want a list of the menu items that are available. With this in mind, let’s put together a navigation flow that displays a home screen with the menu information and hook up the registration button from the onboarding page you created previously to navigate to this new screen.

This list of menu items is stored in a remote server and once queried, delivers a JSON file. You decode the JSON file and save its contents to Core Data. Then, you display its items on a list.

The list is contained in the lower half area (marked in red) of the screen:

This area will display a list of the food retrieved and decoded from the remote server and stored in Core Data.

Although you will fetch and display menu data in the following exercises, it is good to understand the overall design in this step when creating the screen that will hold this data. The following flowchart illustrates the navigation requirements:

Instructions

Use the same project as in the previous exercise, as you will continue to develop the same project.

Step 1: Adding a new home screen

• Open up the XCode project. Select File > New > File , and choose the SwiftUI View file under the iOS tab and User Interface section. Then press Next .

• Name the file Home and press Create .

• Open the newly created Home.swift file and remove all the elements from the body variable block. In the current latest XCode version at the time of writing, it should be a single Text element that you need to remove.

• Add an empty TabView .

Tip : If you are having trouble implementing any of the steps above, review the following resource from the "Create the User Interface in SwiftUI" course:

• Tabbed navigation

Step 2: Adding a new Menu screen to hold the menu information

• Using Xcode, select File > New > File , and choose the SwiftUI View file under the iOS tab and User Interface section. Then press Next.

• Name the file Menu and press Create .

• Open the newly created Menu.swift file and remove all the elements from the body variable block. In the current latest XCode version at the time of writing, it should be a single Text element that you need to remove.

• Add an empty VStack inside the body block as the main view.

• Inside it, place three Text elements to hold:

  • the title of your application at the top,

  • the restaurant location, like Chicago , below it

  • and a short description of the whole application below the previous two fields.

• Lastly, below the three text fields, add an empty List that will later show the menu items.

• Now you should be able to see three text fields one after the other at the top of the screen inside the preview of your new Menu view in the XCode.

Tip: If you are having trouble implementing any of the previous steps, review the following resources in the “Create the user interface with SwiftUI” course:

• Stacks and views

• Text and TextField

• ScrollViews and lists

Step 3: Add the new Menu screen as a tab item on the Home screen

Open the Home file and follow the steps below to add a tab to the TabView :

• Inside the TabView initialize a new instance of the Menu view.

• Right after the initialization call the tabItem method on it with a trailing closure right after the method call

• Inside the closure, return a new Label instance setting "Menu" as the first parameter and "list.dash" as a second systemImage: parameter

Tip : If you are having trouble implementing any of the steps above, review the following resource from the "Create the User Interface in SwiftUI" course:

• Tabbed navigation

Step 3: Add a navigation action to show home page from the registration page

Open the Onboarding file (from the previous exercise) and follow the steps below to connect two pages via the navigation:

• Inside the Onboarding view, add another state variable marked with @State , name it isLoggedIn and set it to false .

• Wrap the VStack inside the NavigationView so it becomes the top view of the screen with the VStack and other content inside of it.

• Inside the VStack above the text fields, add a NavigationLink element and initialize it. Pass a new instance of the Home screen to the destination argument, and set isLoggedIn to the isActive argument. Remember to use the $ sign when passing the state variables to the function.

• Add a trailing closure after the navigation link initialization and return a new instance of EmptyView from it.

• Inside the button trailing closure there is an if-else statement to check that the name and password are not empty. At the very end of the if-else block set the isLoggedIn variable to true .

• As you would not want that users could go back from the home screen to the registration screen, disable the back button on the home screen by:

  • opening Home file, and

  • adding the .navigationBarBackButtonHidden(true) right after the TabView element ends. This will hide the back button inside the Home screen.

Tip: If you are having trouble implementing any of the previous steps, review the following resources in the “Create the user interface with SwiftUI” course:

• Flat and hierarchical navigation

Step 4: Run the project

Run the project and enter some details inside the registration fields and press "Register". It should take you to the home screen which should show a single tab at the bottom that should be selected by default. You should see the menu screen with the text elements you added in the previous steps. You can also try to press the registration button without entering any details inside the text fields and it should perform no action.

To style your views in a more advanced way, you can refer to other lesson items in the Create the user interface with SwiftUI course , as well as the following documentation:

• Text

• VStack

• List

• TabView

Conclusion

By completing this exercise, you’ve created a new home screen that will later display items from Little Lemon's menu. You also set up an intuitive navigation flow that will show the newly created home screen when the user presses the Register button on the Onboarding screen.